<!--
作者：刘洮君
描述：为结业小组页面
修改人：刘洮君
-->
<template>
  <div class="contentBody">
    <!-- 查询类型框 -->
    <div class="bodyHead">
      <el-button
        type="primary"
        id="addTeam"
        :icon="CirclePlus"
        @click="teamDialogFormVisible = true"
        >增加小组</el-button
      >
      <el-dialog
        v-model="teamDialogFormVisible"
        width="60%"
        custom-class="dialogAdd"
      >
        <h1>增加小组</h1>
        <hr class="linear" />
        <div class="linearCover"></div>
        <el-form :model="form">
          <el-form-item label="小组名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="是否已结业" :label-width="formLabelWidth">
            <el-radio v-model="completedCourse" label="yse" size="large"
              >是</el-radio
            >
            <el-radio v-model="completedCourse" label="no" size="large"
              >否</el-radio
            >
          </el-form-item>
        </el-form>

        <template #footer>
          <span class="teamDialog-footer">
            <el-button @click="teamDialogFormVisible = false">取消</el-button>
            <el-button type="primary" @click="teamDialogFormVisible = false"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>

      <!-- 查看已结业分组 -->
      <router-link to="/finishedTeam">
        <el-button type="primary" id="graduated">查看已结业小组</el-button>
      </router-link>
      <!-- 项目名称 -->
      <select name="" id="teamNameSelect" value="teamName">
        <option value="teamName" disabled>项目名称</option>
      </select>
      <!-- 作业类型 -->
      <select name="" id="workTypeSelect" value="workType">
        <option value="workType" disabled>作业类型</option>
      </select>
      <!-- 老师 -->
      <select name="" id="teacherSelect" value="teacher">
        <option value="teacher" disabled>老师</option>
      </select>
      <!-- 查询和重置 -->
      <el-button type="primary" id="search">查询</el-button>
      <el-button type="primary" id="reSet">重置</el-button>
    </div>
    <!--主体部分  -->
    <div class="bodyMid">
      <!-- 功能按钮 -->
      <el-button type="primary" id="teamSituation">考勤实训组2</el-button>
      <el-button
        type="primary"
        id="icon"
        @click="dialogTeamListVisible = true"
      ></el-button>
      <!-- 项目分组弹窗 -->
      <el-dialog
        v-model="dialogTeamListVisible"
        width="30%"
        custom-class="dialogAdd"
      >
        <h1>项目分组</h1>
        <hr class="linear" />
        <div class="linearCover"></div>
        <!-- 搜索框 -->
        <!-- 小组名称 -->
       <el-input
        v-model="teamSearch"
        class="w-50 m-2 teamSearch"
        placeholder="请输入"
        :suffix-icon="Search"
      />
        <el-row class="tac">
          <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo">
              <el-menu-item index="1">
                <span class="teamName" @click="handleClickShow(1)">
                  <p style="height:50%"
                   :contenteditable="edit">霸王龙</p>
                  </span>
                <div class="middle">
                <div class="btnShow" v-show="show == 1">
                  <el-button type="primary" class="iconEdit" @click="editTeamName" />
                  <el-button type="primary" class="iconReduce" />
                </div>
                </div>
                已结业
                  <el-checkbox :v-model="1" size="large"   />
              </el-menu-item>
              <el-menu-item index="2">
                <span  class="teamName" @click="handleClickShow(2)">复仇者联盟</span>
                <div class="middle">
                  <div class="btnShow" v-show="show == 2">
                    <el-button type="primary" class="iconEdit" />
                    <el-button type="primary" class="iconReduce" />
                  </div>
                </div>
                  已结业
                  <el-checkbox :v-model="2" size="large"   />
              </el-menu-item>
              <el-menu-item index="3">
                <span  class="teamName" @click="handleClickShow(3)">东北4F</span>
                <div class="middle">
                  <div class="btnShow" v-show="show == 3">
                    <el-button type="primary" class="iconEdit" />
                    <el-button type="primary" class="iconReduce" />
                  </div>
              </div>
                  已结业
                  <el-checkbox :v-model="3" size="large"   />
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogTeamListVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogTeamListVisible = false"
              >确定</el-button
            >
          </span>
        </template>
      </el-dialog>
      <el-button type="primary" id="deleteTeamMember">批量删除</el-button>
      <!-- 增加小组成员弹窗 -->
      <el-button
        type="primary"
        id="addMember"
        :icon="CirclePlus"
        @click="dialogAddMemberFormVisible = true"
        >增加成员</el-button
      >
      <el-dialog
        v-model="dialogAddMemberFormVisible"
        width="60%"
        custom-class="dialogAdd"
      >
        <h1>增加成员</h1>
        <hr class="linear" />
        <div class="linearCover"></div>
        <el-form>
          <p><label for="stuName">学生姓名:</label><input /></p>
          <p><label for="stuNumber">学生学号:</label><input /></p>
          <p>
            <label>院系:</label>
            <el-select v-model="form.department" placeholder="请选择学院">
              <el-option label="软件学院" value="shanghai" />
              <el-option label="建筑学院" value="beijing" />
              <el-option label="大数据与人工智能学院" value="beijing" />
              <el-option label="管理学院" value="beijing" />
            </el-select>
          </p>
          <p>
            <label>年级:</label>
            <el-select v-model="form.year" placeholder="请选择年级">
              <el-option label="2019级" value="2019" />
              <el-option label="2020级" value="2020" />
              <el-option label="2021级" value="2021" />
              <el-option label="2022级" value="2022" />
            </el-select>
          </p>
          <p>
            <label>专业:</label>
            <el-select v-model="form.major" placeholder="请选择专业">
              <el-option label="软件工程" value="shanghai" />
              <el-option label="软件工程" value="beijing" />
            </el-select>
          </p>
          <el-button type="primary" id="searchStudent">查询</el-button>
          <el-button type="primary" id="reSetStudent">重置</el-button>
        </el-form>
        <!-- 表格 -->
        <div class="tip">
          已选择&nbsp;{{ count }}&nbsp;项&nbsp;&nbsp;
          <el-button @click="toggleSelection()">清空</el-button>
        </div>
        <el-table
          ref="multipleTableRef"
          class="table"
          :data="dialogTableData"
          style="width: 100%"
          :header-cell-style="{ background: '#C2DAE2', color: '#606266' }"
          :row-class-name="tableRowClassName"
          @selection-change="handleSelectionChange"
        >
          <!-- 表头 -->
          <el-table-column prop="Memberselectbox" type="selection" width="40" />
          <el-table-column prop="teamName" label="小组名称" width="120" />
          <el-table-column prop="Memberdepartment" label="院系" width="80" />
          <el-table-column prop="Membermajor" label="专业" width="100" />
          <el-table-column prop="Membergrade" label="年级" width="80" />
          <el-table-column prop="Memberclazz" label="班级" width="100" />
          <el-table-column
            prop="MemberclazzTeacher"
            label="班主任"
            width="80"
          />
          <el-table-column prop="MemberName" label="组长姓名" width="90" />
          <el-table-column prop="MemberNumber" label="学号" width="105" />
          <el-table-column prop="Membersex" label="性别" width="54" />
        </el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogAddMemberFormVisible = false"
              >取消</el-button
            >
            <el-button
              type="primary"
              @click="dialogAddMemberFormVisible = false"
              >确定
            </el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 表格 -->
      <el-table
        ref="multipleTableRef"
        class="table"
        :data="tableData"
        style="width: 100%"
        :header-cell-style="{ background: '#C2DAE2', color: '#606266' }"
        :row-class-name="tableRowClassName"
      >
        <!-- 表头 -->
        <el-table-column prop="selectbox" type="selection" width="40" />
        <el-table-column prop="department" label="院系" width="100" />
        <el-table-column prop="major" label="专业" width="120" />
        <el-table-column prop="grade" label="年级" width="130" />
        <el-table-column prop="clazz" label="班级" width="120" />
        <el-table-column prop="studentName" label="学员姓名" width="140" />
        <el-table-column prop="studentNumber" label="学号" width="140" />
        <el-table-column prop="sex" label="性别" width="100" />
        <el-table-column prop="teamRole" label="项目角色" width="160">
         <template #default="scope">
            <el-select v-model="scope.row.teamRole" >
            <el-option label="前端" value="qianduan" />
            <el-option label="后端" value="houduan" />
            <el-option label="测试" value="ceshi" />
          </el-select>
         </template>
        </el-table-column>
        <el-table-column prop="setHeadman" label="设置组长" width="100">
          <input type="radio" prop="setHeadman" name="setHeadman" />
          <label>设置</label>
        </el-table-column>
        <el-table-column prop="operation" label="操作" width="84">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              id="btnDel"
              @click.prevent="test(scope)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="bodyFoot"></div>
  </div>
</template>

<script>
// 引入图标
import { CopyDocument, CirclePlus,Search  } from "@element-plus/icons-vue";
// import { Location } from "@element-plus/icons";
import { reactive, ref } from "vue";

// 表格有关的
const tableDataRelateEffect = () => {
  const count = ref(0);
  const multipleTableRef = ref();
  // "外面的表格"表格数据
  const tableData = reactive([
    {
      checkedtr: false,
      department: "软件学院",
      major: "软件工程",
      grade: "2019级",
      clazz: "19软工10班",
      studentName: "小李子",
      studentNumber: "123456789",
      sex: "女",
      teamRole: "前端",
      setHeadman: "1",
    },
    {
      checkedtr: false,
      department: "软件学院",
      major: "软件工程",
      grade: "2019级",
      clazz: "19软工10班",
      studentName: "小李子",
      studentNumber: "123456789",
      sex: "女",
      teamRole: "前端",
      setHeadman: "2",
    },
  ]);

  // "增加成员"表格数据
  const dialogTableData = reactive([
    {
      Memberselectbox: false,
      teamName: "霸王龙",
      Memberdepartment: "软件学院",
      Membermajor: "软件工程",
      Membergrade: "2019级",
      Memberclazz: "19900010班",
      MemberclazzTeacher: "王老师",
      MemberName: "张三丰",
      MemberNumber: "1990001001",
      Membersex: "男",
    },
    {
      Memberselectbox: false,
      teamName: "霸王龙",
      Memberdepartment: "软件学院",
      Membermajor: "软件工程",
      Membergrade: "2019级",
      Memberclazz: "19900010班",
      MemberclazzTeacher: "王老师",
      MemberName: "张三丰",
      MemberNumber: "1990001001",
      Membersex: "男",
    },
    {
      Memberselectbox: false,
      teamName: "霸王龙",
      Memberdepartment: "软件学院",
      Membermajor: "软件工程",
      Membergrade: "2019级",
      Memberclazz: "19900010班",
      MemberclazzTeacher: "王老师",
      MemberName: "张三丰",
      MemberNumber: "1990001001",
      Membersex: "男",
    },
  ]);

  // 设置表格行类名方法
  const tableRowClassName = ({ rowIndex }) => {
    if (rowIndex % 2 === 1) {
      return "warning-row";
    } else {
      return "succse-row";
    }
  };
  // 设置表头类名方法
  const tableHeadClassName = () => {
    return "heading";
  };
  // 清除全选
  const toggleSelection = () => {
    multipleTableRef.value.clearSelection();
  };
  // 选择了几项
  const handleSelectionChange = (val) => {
    count.value = val.length;
  };
  return {
    count,
    multipleTableRef,
    tableData,
    dialogTableData,
    tableRowClassName,
    tableHeadClassName,
    toggleSelection,
    handleSelectionChange,
  };
};
// 弹窗有关的
const dialogRelateEffect = () => {
  const show = ref("");
  const dialogTeamListVisible = ref(false);
  const dialogTableVisible = ref(false);
  const teamDialogFormVisible = ref(false);
  const dialogAddMemberFormVisible = ref(false);
  const formLabelWidth = "100px";
  const completedCourse = ref("");
  const teamSearch = ref('');
  const edit = ref(false);
  const form = reactive({
    name: "",
    clazz: "",
    major: "",
    year: "",
    department: "",
    region: "",

    delivery: false,
    resource: "",
    desc: "",
  });
  const handleClickShow = (num) => {
    show.value = num;
  };
  const editTeamName = () => {
    edit.value = true;
  } 
  return {
    dialogTableVisible,
    teamDialogFormVisible,
    dialogAddMemberFormVisible,
    formLabelWidth,
    form,
    completedCourse,
    dialogTeamListVisible,
    show,teamSearch,edit,
    handleClickShow,editTeamName,
  };
};
export default {
  name: "unfinishedTeam",
  // components: {Location},
  setup() {
    const test = (res) => {
      console.log(res);
    };
    // 表格
    const {
      count,
      multipleTableRef,
      tableData,
      dialogTableData,
      tableRowClassName,
      tableHeadClassName,
      toggleSelection,
      handleSelectionChange,
    } = tableDataRelateEffect();
    // 弹窗
    const {
      dialogTableVisible,
      teamDialogFormVisible,
      dialogAddMemberFormVisible,
      formLabelWidth,
      form,
      completedCourse,
      dialogTeamListVisible,
      show,teamSearch,edit,
      handleClickShow,editTeamName
    } = dialogRelateEffect();

    return {
      // 表格
      CopyDocument,
      CirclePlus,
      Search,
      count,
      multipleTableRef,
      tableData,
      dialogTableData,
      tableRowClassName,
      tableHeadClassName,
      toggleSelection,
      handleSelectionChange,
      // 弹窗
      dialogTableVisible,
      teamDialogFormVisible,
      dialogAddMemberFormVisible,
      formLabelWidth,
      form,
      completedCourse,
      dialogTeamListVisible,
      show,edit,
      handleClickShow,editTeamName,
      test,teamSearch,
    };
  },
};
</script>
<style>
/* 去除下划线 */
a {
  text-decoration: none;
}

/* 表格单行类名 */
.warning-row {
  background-color: #c2dae2 !important;
  border: 1px solid #000 !important;
}
/* 表格双行类名 */
.succse-row {
  border: 2px solid #070707 !important;
}
/* 增加小组弹窗 */
.dialogAdd {
  background-color: #e0eef2 !important;
  border-radius: 15px;
}
.dialogAdd h1 {
  position: relative;
  bottom: 40px;
  color: #3e94ad;
}
.linear {
  width: 95%;
  height: 2px;
  background-color: #c6d4da;
  border: none;
  position: relative;
  bottom: 20px;
}
.linearCover {
  width: 25%;
  height: 8px;
  border-radius: 15px;
  background-color: #3e94ad;
  position: relative;
  bottom: 25px;
}
.el-form {
  display: inline-block;
}
.el-form > p {
  display: inline-block;
  width: 30%;
  height: 45px;
}
.el-form > p > input {
  width: 155px;
  height: 32px;
  border: 1px solid rgb(225, 215, 215);
  border-radius: 4px;
}
#searchStudent {
  width: 45px;
  height: 25px;
  background-color: #3e94ad;
  color: #fff;
  margin-left: 3px;
  border: none;
}
#reSetStudent {
  /* margin-left: 20px; */
  width: 45px;
  height: 25px;
  color: rgb(16, 15, 15);
  border: 1px solid rgb(203, 198, 198);
  background-color: #fff;
}
.tip {
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #000;
  margin: auto;
  background-color: #c4e4ef;
  /* opacity: 0.2; */
  border-radius: 5px;
}

/* 项目分组弹窗 */
.btnShow {
  width: 150px;
  height: 56px;
}
.iconEdit {
  margin-left: 15px;
  margin-bottom: 13px;
  width: 30px;
  height: 30px;
  border: none;
  background: url("~@/assets/imgs/edit.png") center no-repeat;
  background-size: 20px 20px;
}
.iconReduce {
  width: 30px;
  height: 30px;
  border: none;
  margin-bottom: 13px;
  background: url("~@/assets/imgs/reduce.png") center no-repeat;
  background-size: 20px 20px;
}
.teamSearch{
position: relative;
bottom: 15px;
}
.tac .teamName{
  width: 30%;
}
.middle{
  width: 40%;
}
</style>

<style lang="less" scoped>
// content内容
.contentBody {
  padding: 20px;
  margin-left: 30px;
  margin-top: 80px;
  // 查询
  .bodyHead {
    width: 100%;
    height: 50px;
    // 添加小组
    #addTeam {
      width: 85px;
      height: 40px;
      background-color: #3e94ad;
      color: #fff;
      border: none;
    }

    // 查看已结业分组
    #graduated {
      width: 120px;
      height: 40px;
      margin-left: 30px;
      color: rgb(16, 15, 15);
      border: 1px solid rgb(203, 198, 198);
      background-color: #fff;
    }
    // 项目组名称
    #teamNameSelect {
      margin-left: 300px;
      width: 150px;
      height: 40px;
      border: 1px solid rgb(212, 211, 211);
    }
    // 作业类型
    #workTypeSelect {
      margin-left: 30px;
      border: 1px solid rgb(212, 211, 211);
      width: 150px;
      height: 40px;
    }
    // 实训老师
    #teacherSelect {
      margin-left: 30px;

      width: 130px;
      height: 40px;
      border: 1px solid rgb(212, 211, 211);
    }
    // 查询按钮
    #search {
      width: 85px;
      height: 40px;
      background-color: #3e94ad;
      color: #fff;
      margin-left: 23px;
      border: none;
    }
    // 重置
    #reSet {
      margin-left: 20px;
      width: 80px;
      height: 40px;
      color: rgb(16, 15, 15);
      border: 1px solid rgb(203, 198, 198);
      background-color: #fff;
    }
  }
  // 表格
  .bodyMid {
    margin-top: 20px;
    // 具体小组名称
    #teamSituation {
      width: 85px;
      height: 40px;
      color: #000;
      border-radius: 5px 5px 0px 0px;
      border: none;
      background-color: #c2dae2;
      z-index: 5;
    }
    // 小组列表图标
    #icon {
      width: 30px;
      height: 30px;
      margin-left: 0px;
      margin-top: 10px;
      border: 0;
      background: url(../../assets/imgs/teamBtn.png) no-repeat;
      background-size: 30px 30px;
    }
    // 批量删除
    #deleteTeamMember {
      float: right;
      background-color: #ed4b4b;
      color: #fff;
      border: none;
    }
    // 添加成员
    #addMember {
      width: 85px;
      height: 35px;
      background-color: #3e94ad;
      color: #fff;
      float: right;
      border: none;
    }

    // 表格
    .table {
      font-size: 12px;
    }
    // 删除按钮
    #btnDel {
      width: 40px;
      height: 30px;
      background-color: #ed4b4b;
      color: #fff;
      font-size: 12px;
      border: none;
    }
  }
}
</style>